/*
 * @Description  : 
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-04-07 17:57:23
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-05-07 09:46:55
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\curve\\curve.component.ts
 * Copyright (C) 2022 huzhenhong. All rights reserved.
 */
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
import { DataService } from '../../../services/data.service';
// import DataSet from '@antv/data-set';
const DataSet = require('@antv/data-set');
import { Chart } from '@antv/g2';
@Component({
  selector: 'app-financetable-curve-min',
  templateUrl: './curve.component.html',
  styleUrls: ['./curve.component.less']
})
export class DatatableCustomindexCurveMinComponent implements OnInit,OnChanges {
  el: any;
  @Input() chartData: any;
  chart: any;
  data = [
    { time: '01', type: '订单数', temperature: 7 },
    { time: '02', type: '运单数', temperature: 3.9 },
    { time: '03', type: '订单数', temperature: 6.9 },
    { time: '04', type: '订单数', temperature: 4.2 },
    { time: '05', type: '订单数', temperature: 9.5 },
    { time: '06', type: '订单数', temperature: 5.7 },
    { time: '06', type: '运单数', temperature: 5.7 },
    { time: '07', type: '运单数', temperature: 14.5 },
    { time: '08', type: '订单数', temperature: 8.5 },
    { time: '09', type: '订单数', temperature: 18.4 },
    { time: '10', type: '订单数', temperature: 11.9 },
    { time: '11', type: '订单数', temperature: 21.5 },
    { time: '12', type: '订单数', temperature: 15.2 },
    { time: '08', type: '运单数', temperature: 8.5 },
    { time: '09', type: '运单数', temperature: 18.4 },
    { time: '10', type: '运单数', temperature: 11.9 },
    { time: '11', type: '运单数', temperature: 21.5 },
    { time: '12', type: '订单数', temperature: 15.2 },
  ];
  constructor(private service: DataService, private ngZone: NgZone) {

  }
  ngOnChanges(changes: SimpleChanges): void {
    if (this.chartData) {
      // setTimeout(()=>{
      //   this.chart.render(true)
      // }, 1000)

    }
  }

  ngOnInit(): void {

  }
  reRender() {
    setTimeout(() => {
      this.chart.data(this.chartData);
      this.chart.render();
    }, 1000)
  }
  render(el: ElementRef<HTMLDivElement>): void {
    this.el = el.nativeElement
    setTimeout(() => {
      this.ngZone.runOutsideAngular(() => this.init(this.el));
      }, 1000)
  }

  private init(el: HTMLElement): void {
    this.chart = new Chart({
      container: el,
      autoFit: true,
      height: 290,
    });
    let value: any = []
      this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => {
     if(res) {
      res.forEach((element: any) => {
        value.push({
          time: element?.time,
          type: element?.type == 'DD' ? '订单数' : '运单数',
          temperature: element?.value,
       });
       });
       console.log(value);
       this.chartData = value
    this.chart.data(this.chartData);
    this.chart.scale({
      time: {
        range: [0, 1],
      },
      number: {
        nice: true,
      },
    });
    
    this.chart.tooltip({
      showCrosshairs: true,
      shared: true,
    });
    
  
    this.chart.axis('temperature', {
      label: {
        formatter: (val: any) => {
          return val;
        },
      },
    });
    this.chart
    .line()
    .position('time*temperature')
    .color('type')
    .shape('smooth');
  
    this.chart
    .point()
    .position('time*temperature')
    .color('type')
    .shape('circle');
  this.chart.render();
        };
      });
  
    
  }
}
